﻿@page "/"
@using global::UniversityLink.DataModels
@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<LinkContext> DbFactory
@inject IJSRuntime JS
@inject ModalService _modalService

<Flex Justify="center" Align="center">
    <GridRow Class="block" Gutter="(30, 24)">
        @for (var index = 0; index < Categories.Count; index++)
        {
            var category = Categories[index];
            var i = index != Categories.Count - 1 || Categories.Count % 2 == 0 ? index % 4 is 1 or 2 ? 15 : 9 : 24;
            var col = i switch
            {
                15 => 4,
                24 => 2,
                _ => 6
            };
            <GridCol Xs="24" Sm="24" Md="@(index != Categories.Count - 1 || Categories.Count % 2 == 0 ? 12 : 24)"
                     Lg="@i"
                     Xl="@i" Xxl="@i">
                <AppleCard Style="height: 100%">
                    <TitleTemplate>
                        <Flex Gap="10">
                            <IconFont Style="font-size: 40px" Type="@($"icon-{category.Icon}")"/>
                            <div style="font-weight: bold;font-size: 30px;line-height: 1.35em">@category.Name</div>
                        </Flex>
                        <div style="color: #00000073;margin-top: 3px;margin-bottom: 3px">@category.Description</div>
                    </TitleTemplate>
                    <ContextTemplate>
                        <GridRow Gutter="(4,4)" Style="margin-bottom: 8px;">
                            @foreach (var link in category.Links)
                            {
                                <GridCol Xs="8" Sm="8"
                                         Md="8"
                                         Lg="@col"
                                         Xl="@col" Xxl="@col">
                                    @if (!isWeixin && link.Description == "微信打开")
                                    {
                                        <a @onclick="() => QrCodeModalOpen(link)" target="_blank"
                                           class="a-btn"
                                           title="@link.Description">
                                            <div style="text-align: center">
                                                @if (!string.IsNullOrEmpty(link.Icon))
                                                {
                                                    if (link.Icon.StartsWith("http"))
                                                    {
                                                        <img alt="" src="@link.Icon"
                                                             style="height: 40px;width: 40px;border-radius: 4px"/>
                                                        <div class="btn-description">@link.Name</div>
                                                    }
                                                    else
                                                    {
                                                        <IconFont Style="font-size: 40px"
                                                                  Type="@($"icon-{link.Icon}")"/>
                                                        <div class="btn-description">@link.Name</div>
                                                    }
                                                }
                                                else
                                                {
                                                    <img alt="" src="@GetIcon(link.Url)"
                                                         style="height: 40px;width: 40px;border-radius: 4px"/>
                                                    <div class="btn-description">@link.Name</div>
                                                }
                                            </div>
                                        </a>
                                    }
                                    else
                                    {
                                        <a href="@link.Url" target="_blank"
                                           class="a-btn"
                                           title="@link.Description">
                                            <div style="text-align: center">
                                                @if (!string.IsNullOrEmpty(link.Icon))
                                                {
                                                    if (link.Icon.StartsWith("http"))
                                                    {
                                                        <img alt="" src="@link.Icon"
                                                             style="height: 40px;width: 40px;border-radius: 4px"/>
                                                    }
                                                    else
                                                    {
                                                        <IconFont Style="font-size: 40px"
                                                                  Type="@($"icon-{link.Icon}")"/>
                                                    }
                                                }
                                                else
                                                {
                                                    <img alt="" src="@GetIcon(link.Url)"
                                                         style="height: 40px;width: 40px;border-radius: 4px"/>
                                                }
                                                <div class="btn-description">@link.Name</div>
                                            </div>
                                        </a>
                                    }
                                </GridCol>
                            }
                        </GridRow>
                    </ContextTemplate>
                </AppleCard>
            </GridCol>
        }
    </GridRow>
</Flex>

<Footer Class="Layout-Footer" style="text-align: center;">
    <p class="Layout-Footer-Title">
        Copyright
        <Icon Type="copyright" Theme="outline"/>
        2024 iOS Club of XAUAT
    </p>
    <div>
        <Space>
            <Split>
                <Divider Type="DirectionVHType.Vertical"/>
            </Split>
            <ChildContent>
                <SpaceItem Class="desktop-phone-flex a">
                    <a class="a" href="https://cn.xauat.edu.cn/" target="_blank">西安建筑科技大学
                        <Icon Type="link" Theme="outline"/>
                    </a>
                </SpaceItem>
                <SpaceItem Class="a">
                    <a class="a" href="https://beian.miit.gov.cn/" target="_blank">备案号 陕ICP备2024031872号
                        <Icon Type="link" Theme="outline"/>
                    </a>
                </SpaceItem>
                <SpaceItem Class="desktop-phone-flex a">
                    <a class="a" href="https://gitee.com/XAUATiOSClub" target="_blank">我们的Gitee组织
                        <Icon Type="link" Theme="outline"/>
                    </a>
                </SpaceItem>
            </ChildContent>
        </Space>
    </div>
</Footer>

@code
{
    private List<CategoryModel> Categories { get; set; } = [];
    private bool isWeixin;

    protected override async Task OnInitializedAsync()
    {
        if (Categories.Count != 0) return;
        await using var context = await DbFactory.CreateDbContextAsync();
        Categories = await context.Categories
            .Include(x => x.Links.OrderBy(y => y.Index))
            .OrderBy(x => x.Index)
            .ToListAsync();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (!firstRender) return;
        isWeixin = await JS.InvokeAsync<bool>("isWeiXin");
        await base.OnAfterRenderAsync(firstRender);
    }

    private async Task QrCodeModalOpen(LinkModel link)
    {
        await _modalService.CreateConfirmAsync<ConfirmTemplate, LinkModel, LinkModel>
            (new ConfirmOptions() { OkCancel = false }, link);
    }

    private static string GetIcon(string url)
        => $"https://{url.Replace("https://", "").Replace("http://", "").Split('/').First()}/favicon.ico";
}

<style>
    .ant-layout {
        background-image: linear-gradient(to bottom right, #ff6b6b, #7171ae, #10bce7);
        overflow: auto;
    }

    .ant-layout-content {
        min-height: 100vh;
    }

    .Layout-Header, .Layout-Footer {
        background: rgba(255, 255, 255, 0.3);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
        padding-left: 10px;
        padding-right: 10px;
        margin: 10px;
        border-radius: 10px;
    }

    .Layout-Footer-Title {
        color: #f3f5f7;
    }

    .block {
        width: 80%;
        margin-top: 45px;
        margin-bottom: 45px;
    }

    @@media screen and (max-width: 768px) {
        .block {
            width: 90%;
        }
    }

    ::-webkit-scrollbar {
        display: none;
    }

    .a {
        color: #f3f5f7;
        transition: .2s;
        text-decoration: none;
        background: linear-gradient(#07f2, #07f2) no-repeat center bottom / 100% 0;
    }

    .a:hover {
        color: #f3f5f7;
        background: linear-gradient(#07f2, #07f2) no-repeat center bottom / 100% 100%;
        border-radius: .2em;
    }
</style>